<template>
	<view>
		<u-popup :show="show" :round="6" mode="bottom" @close="close"  :closeable="true">
				<view class="box" v-if="data.content">
		           <view class="head--box">
					   <image @click="imgInfo()" :src="specInfo.img&&specInfo.img.length?specInfo.img:data.content.img" mode="aspectFill"></image>
					   <view style="display: flex;flex-direction: column;">
						   <text :style="'font-weight: 600;margin-top: 3px;font-size:18px;color:'+app_color">￥{{specInfo.shop_price}}
							<text style="font-size: 11px;color: #999;text-decoration: line-through;font-weight: 500;font-style: oblique;margin-left: 5px;;"
							v-if="specInfo.market_price>specInfo.shop_price">原价：{{specInfo.market_price}}</text>
						   </text>
						   <text style="font-size: 14px;color: #666;margin: 3px 0;">库存：{{specInfo.stock}}件
							<text v-if="specInfo.stock<=0" style="font-size: 12px;background-color: #ff5500;padding: 2px 4px;border-radius: 4px;color: #fff;margin-left: 5px;">售罄</text>
							</text>
						   <text style="font-size: 14px;color: #666">已选：{{specInfo.name?specInfo.name:"默认规格"}}</text>
					   </view>
				   </view>
				  <view style="overflow: auto;flex-grow: 1;">
					  <view class="spec-box" v-for="list in data.content.spec.spec" v-if="data.content.spec_type==2&&data.content.spec.spec&&data.content.spec.spec.length">
						   <view class="spec_title">{{list.name}}</view>
						   <view class="spec_list">
							   <text class="spec_name" @click="selectSpec(list.name,s)"
								:style="s==info.spec[list.name]?'background: '+colorT(app_color)+';color: #fff;':''" v-for="(s,k) in list.value">{{s}}</text>
						   </view>
					  </view>
					 
					  <view class="spec-box">
						   <view class="spec_title">数量</view>
						   <view class="spec_list" >
							  <u-number-box :min="data.content.min" v-model="info.num" :max="specInfo.stock" inputWidth="50"></u-number-box>
							  <text style="margin:0 5px;font-size: 14px;color: #666;">件
									<text v-if="data.content.min>1" style="font-size: 12px;color: #ffaa7f;margin-left: 5px;">（该商品2件起售）</text>
							  </text>
						   </view>
					  </view>
				  </view>
				  <view class="buy_btn" :style="bc">
					  <view @click="createdOrder()">加入购物车</view>
					  <view style="width: 1px;height: 35rpx;background-color: #eee"></view>
					  <view style="padding-right: 28rpx;" @click="buy()">立即购买</view>
				  </view>
				</view>
			</u-popup>
			
	</view>
</template>

<script>
	export default {
		name:"goods-buy",
		data() {
			return {
				showInfo:{
					img:""
				},
				show:false,
				data:{},
				specInfo:{},
				info:{
					spec:{},
					num:1,
					cur_spec:""
				},
				goodsId:0,//商品ID，如果两次ID相同则不会重新渲染
				app_color:"#fe3b65",
				bc:""
			};
		},created(){
			this.bc = this.background();
			this.app_color = this.$appData.data.app_color;
		},props:{
		
		},methods:{
			buy(){
				let param = [{
						goods_id:this.data.id,
						spec_name:this.info.cur_spec,
						num:this.info.num
					}];
				if(this.data.content.spec_type==2){
					if(this.data.content.spec.spec_list[this.info.cur_spec].stock<this.info.num){
						this.msg("该规格库存不足");
						return false;
					}
					param[0].spec_name = this.info.cur_spec;
				}else{
					if(this.data.content.stock<this.info.num){
						this.msg("该规格库存不足");
						return false;
					}
					param[0].spec_name = '默认';
				}
				let self = this;
				this.moxiPost('/plugin/mall/user/order/add',{goods:param},function(data){
					if(data.data){
						self.navto('page_mall/order/created_order?order_id='+data.data);
					}
				})
			},
			background(){
				const color = uni.$u.colorGradient(this.$appData.data.app_color_2, this.$appData.data.app_color, 4)
				return this.moxi.background(color)
			},
			imgInfo(){
				uni.previewImage({
					urls:[this.specInfo.img.length?this.specInfo.img:this.data.content.img],
					current:0,
				});
			},
			createdOrder(){
				let self = this
				const param = {
					goods_id:this.data.id,
					num:this.info.num,
					spec_name:this.info.cur_spec
				}
				this.moxiPost("/plugin/mall/user/cart/created",param,function(data){
					self.$emit('addCart',param)
					self.msg(data.hint);
					self.show = false;
				})
			},
			colorT(color,r=0.8){
				return uni.$u.colorToRgba(color, r);
			},
			open(data) {
				if(!data){
					this.msg('缺少商品参数');
					return false;
				}
				let id = data;
				
				if(data.id){
					id = data.id;
					if(this.data.id!=id){
						this.data = data;
						this.init()
					}
					this.show = true;
				}else{
					let self = this;
					if(!this.data.id||this.data.id!=id){
						this.moxiPost('/plugin/mall/index/goods/goods_info',{id:id},function(data){
							self.data = data.data;
							self.init()
							self.show = true;
						})
					}else{
						this.show = true;
					}
				}
			},
			init(){
				this.info = {
					spec:{},
					num:this.data.content.min,
					cur_spec:""
				};
				this.showInfo.img = this.data.content.img;
				if(this.data.content.spec_type==2){
					for(let k in this.data.content.spec.spec){
						this.info.spec[this.data.content.spec.spec[k].name] = "";
					}
					for(let k in this.data.content.spec.spec_list){
						this.info.cur_spec = k;
						if(this.data.content.spec.spec_list[k].stock>0){
							this.selectSpec(k)
							break;
						}
					}
					this.selectSpec(this.info.cur_spec)
				}else{
					this.specInfo = this.data.content;
					this.$forceUpdate()
				}
			},
			selectSpec(name,value=false){
				if(value===false){
					name = name.split("|");
					for(let k in name){
						name[k] = name[k].split(":");
						this.info.spec[name[k][0]] = name[k][1];
					}
				}else{
					this.info.spec[name] = value;
				}
				this.info.cur_spec = '';
				for(let k in this.info.spec){
					this.info.cur_spec += '|'+k+":"+this.info.spec[k];
				}
				this.info.cur_spec = this.info.cur_spec.substr(1);
				this.specInfo = this.data.content.spec.spec_list[this.info.cur_spec];
				this.$forceUpdate()
				
			},
			close(){
				this.show = false;
			}
		}
	}
</script>

<style>
	.head--box{display: flex;flex-direction: row;}
	.head--box image{width: 90px;height: 90px;border-radius: 5px;margin: -20px 10px 0 10px;margin-bottom: 5px;;}
	.box{height: 600rpx;display: flex;flex-direction: column;}
	.spec-box{padding: 10px;display:flex;flex-direction: column;}
	.spec_title{color: #333;margin-bottom: 5px;font-size: 13px;}
	.spec_list{display: flex;flex-direction: row;;justify-content: flex-start;align-items: center;flex-wrap: wrap;}
	.spec_list .spec_name{padding: 3px 8px;background-color: #eee;color: #333;border-radius: 5px;margin: 5px 5px 5px 0;font-size: 14px;;}

.buy_btn{display: flex;flex-direction: row;height: 75rpx;margin: 7px;border-radius: 50px;flex: 0 1 auto;
justify-content: space-around;box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
align-items: center;text-align: center;flex: 0 0 auto;}
.buy_btn view{color: #fff;font-size: 14px;text-align: center;width: 100%}
</style>